<template>
  <div
    class="event-container"
    v-if="demand"
  >
    <toppanel
      :title="demand.title"
      :titleColor="titleColor"
      back-visible
      use-toggle
      bgcolor="transparent"
    />
    <scalebox :ratio="2">
      <image
        :src="demand.thumb"
        mode="aspectFill"
      />
    </scalebox>

    <scroll-view
      :scroll-x="scroll.x"
      :scroll-y="scroll.y"
      class="scroll-container"
    >
      <van-cell-group
        custom-class="match-panel van-cell-group-radius"
        :border="false"
      >
        <van-cell
          :title="demand.title"
          custom-class="autofit-cell match-panel-info"
          use-label-slot
        >
          <view slot="label">
            <view
              class="match-board"
              v-if="demand.category"
            >
              <view class="match-board-text">{{demand.category.name}}</view>
            </view>
          </view>
        </van-cell>
      </van-cell-group>
      <van-cell-group
        custom-class="user-cell-group"
        :border="false"
      >
        <user-cell
          :icon="demand.user.avatar"
          :title="demand.user.companyName"
          :label="demand.user.username"
        />
      </van-cell-group>
      <van-cell-group
        custom-class="content-body"
        :border="false"
      >
        <p
          v-for="(text,index) in demand.body"
          :key="index"
          class="content-body__paragraph"
        >
          {{ text }}
        </p>
      </van-cell-group>
      <van-cell-group
        custom-class="content-images"
        :border="false"
      >
        <p
          class="content-images__box"
          v-for="(image,index) in demand.images"
          :key="index"
        >
          <image
            :src="image.path"
            mode="aspectFill"
          />
        </p>
      </van-cell-group>
      <van-cell-group v-if="demand.attach">
        <van-cell
          icon="file"
          title="附件:"
          :value="demand.attach.path"
        >
        </van-cell>
      </van-cell-group>

      <van-cell-group
        v-if="demand.solutions.length>0"
        title="解决方案"
        custom-class="content-solutions"
      >
        <van-cell
          v-for="(solution,index) in demand.solutions"
          :key="index"
          use-label-slot
        >
          <view slot="title">
            <view class="van-multi-ellipsis--l2">
              {{solution.title}}
            </view>
          </view>
          <view slot="label">
            <user-cell
              v-if="solution.user"
              :avatar="solution.user.avatar"
              :title="solution.user.companyName"
              :label="solution.user.username"
              :border="false"
            />
            <view
              class="match-board"
              v-if="solution.user"
            >
              <view class="match-board-text">{{solution.user.username}}</view>
            </view>
          </view>
        </van-cell>
      </van-cell-group>
    </scroll-view>

    <page-action>
      <van-button
        plain
        icon="chat"
        @click="onClickReply"
      >
        回复需求
      </van-button>
      <van-button
        plain
        icon="share"
        open-type="share"
      >
        我要分享
      </van-button>
    </page-action>
  </div>
</template>

<script>
import UserCell from '@/components/cell/user'
import Scalebox from '@/components/scalebox'
import PageAction from '@/components/action'
import toppanel from '@/components/toppanel'
import price from '@/components/price'
import card from '@/components/card'
import Tags from '@/components/tags'
import { needViewApi } from '@/api'

export default {
  components: {
    UserCell,
    card,
    PageAction,
    toppanel,
    price,
    Tags,
    Scalebox
  },

  data () {
    return {
      id: 0,
      scroll: {
        x: false,
        y: true
      },
      navBackgroundColor: '#ff6600',
      value: '',
      statusBarHeight: 20, // 状态栏高度
      titleBarHeight: '', // 标题栏高度
      navBarHeight: '', // 导航栏总高度
      currentTab: 0, // 预设当前项的值
      scrollLeft: 0, // tab标题的滚动条位置
      expertList: [
        {
          // 假数据
          img: 'avatar.png',
          name: '欢顔',
          tag: '知名情感博主',
          answer: 134,
          listen: 2234
        }
      ],
      board: {
        icon: '',
        title: '能源'
      },
      tags: [
        {
          color: '#ffe1e1',
          textColor: '#ad0000',
          text: '官方'
        },
        {
          color: '#ffe1e1',
          textColor: '#ad0000',
          text: '路跑'
        }
      ],
      intros: [
        {
          color: '#67C0FA',
          text: '发布时间'
        },
        {
          text: '2019-04-29 18:12:33'
        }
      ],
      apis: {
        recommend: 'home/recommend'
      },
      demand: null,
      title: '2020黔东南超100公里国际马拉松',
      titleColor: '#000000',
      username: 'EMHOME',
      gender: 2,
      avatar: 'http://oss.youmbe.com/attachments/avatar/29.jpg',
      cover: 'http://oss.youmbe.com/assets/ucenter/background.jpg',
      video: '/static/icons/video.png',
      checkedItemId: 0,
      show: false,
      vertical: false,
      autoplay: false,
      interval: 2000,
      duration: 500,
      swipers: [
        {
          title: '',
          description: '',
          thumb: 'http://oss.youmbe.com/attachments/temp/scenic/01.jpg',
          class: 'demo-text-1'
        },
        {
          title: '',
          description: '',
          thumb: 'http://oss.youmbe.com/attachments/temp/scenic/02.jpg',
          class: 'demo-text-3'
        },
        {
          title: '',
          description: '',
          thumb: 'http://oss.youmbe.com/attachments/temp/scenic/03.jpg',
          class: 'demo-text-3'
        },
        {
          title: '',
          description: '',
          thumb: 'http://oss.youmbe.com/attachments/temp/scenic/04.jpg',
          class: 'demo-text-3'
        }
      ],
      data: {
        name: 'test',
        thumb: 'http://oss.youmbe.com/attachments/avatar/29.jpg',
        begintime: '2019-09-21',
        description: 'test',
        likes: '22'
      },
      items: [
        {
          id: 1,
          title: '单日赛（食宿自理）',
          fulltitle: '男、女个人马拉松单日赛（食宿自理）',
          price: 100,
          enrolls: 85,
          description: '包括参赛包和黔东南苗族侗族自治州旅游通票',
          tags: [
            {
              color: '#67C0FA',
              text: '食宿自理'
            },
            {
              color: '#67C0FA',
              text: '官方'
            },
            {
              text: '报名中'
            }
          ]
        },
        {
          id: 2,
          title: '单日赛（含食宿）',
          fulltitle: '男、女个人马拉松单日赛（含食宿）',
          price: 500,
          enrolls: 894,
          description:
            '报名费包括组委会提供的比赛前一日的食宿费用和比赛当日的早、中餐费用以及参赛包和黔东南州旅游通票',
          tags: [
            {
              color: '#67C0FA',
              text: '含食宿'
            },
            {
              color: '#67C0FA',
              text: '官方'
            },
            {
              text: '报名中'
            }
          ]
        },
        {
          id: 3,
          title: '三日赛（食宿自理）',
          fulltitle: '男、女个人超100公里三日赛（食宿自理）',
          price: 200,
          enrolls: 326,
          description:
            '包含组委会提供的交通转场费用、参赛包和黔东南苗族侗族自治州旅游通票，转场需前往组委会指定的地点乘坐转场大巴',
          tags: [
            {
              color: '#67C0FA',
              text: '食宿自理'
            },
            {
              color: '#67C0FA',
              text: '官方'
            },
            {
              text: '报名中'
            }
          ]
        },
        {
          id: 4,
          title: '三日赛（含食宿）',
          fulltitle: '男、女个人超100公里三日赛（含食宿）',
          price: 1480,
          enrolls: 59,
          description:
            '报名费包含组委会提供的比赛期间食宿与交通费用以及参赛包和黔东南州旅游通票',
          tags: [
            {
              color: '#67C0FA',
              text: '含食宿'
            },
            {
              color: '#67C0FA',
              text: '官方'
            },
            {
              text: '报名中'
            }
          ]
        }
      ]
    }
  },
  onLoad (option) {
    this.id = option.id
  },
  created () {
    console.log('created')
  },
  beforeMount () {
    console.log('beforeMount')
  },
  mounted () {
    console.log('mounted')
  },
  computed: {
    matchItemPrice () {
      let currentTarget = this.items.find(
        (v) => v.id + '' === this.checkedItemId
      )
      console.log(this.checkedItemId)
      console.log(currentTarget)
      if (currentTarget) {
        return currentTarget.price
      }
      return ''
    }
  },
  methods: {
    // 获取数据方法
    getList () {
      console.log('event/index getList')
      needViewApi(this.id)
        .then((res) => {
          console.log(res)
          this.demand = res
        })
        .catch((e) => {
          console.log(e)
        })
    },
    // 滚动切换标签样式
    switchTab (e) {
      this.currentTab = e.mp.detail.current
    },
    // 点击标题切换当前页时改变样式
    swichNav (e) {
      var cur = e.mp.target.dataset.current
      if (this.currentTab === cur) {
        return false
      } else {
        this.currentTab = cur
      }
    },
    onItemChange (event) {
      this.checkedItemId = event.mp.detail
      console.log('onItemClick', this.checkedItemId)
    },
    onItemClick (event) {
      console.log(event)
      console.log(event.mp)
      const { name } = event.mp.currentTarget.dataset
      this.checkedItemId = name
      console.log('onItemClick', this.checkedItemId)
    },
    showPopup () {
      this.show = true
    },
    onClose () {
      this.show = false
    },
    onClickReply () {
      let url = '/pages/reply/main?id=' + this.demand.id
      console.log(url)
      wx.navigateTo({
        url: url
      })
      console.log('onClickReply')
    }
  },
  onShow () {
    console.log('onShow')
    this.getList()
  },
  onShareAppMessage (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: this.title,
      path: '/pages/match/main?id=' + this.id + '&from=share'
    }
  }
}
</script>

<style lang="less">
// .comp-navbar {
//   background: transparent;
// }
.place-item {
  width: 100%;
  height: 100px;
  background: #ff6600;
  border-radius: 5px;
  margin-bottom: 10px;
}
.swiper-corner {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.swiper-item {
  height: 100%;
  image {
    width: 100%;
    height: 100%;
    display: block;
  }
  div {
    height: 100%;
  }
}
.content {
  &-body {
    padding: 10px 15px;
    &__paragraph {
      text-indent: 1em;
      margin-bottom: 10px;
    }
  }
  &-images {
    padding: 10px 15px;
    &__box {
      margin-bottom: 10px;
      image {
        width: 100%;
      }
      &:last-child {
        margin: 0;
      }
    }
  }
  &-solutions {
    .van-cell {
      &-title {
      }
    }
  }
}
.imageCount {
  display: inline-block;
  border-radius: 20px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  right: 10px;
  bottom: 20px;
  font-size: 10px;
  padding: 4px 10px;
}

.scroll-container {
  padding: 0 0 10px;
  margin-top: -10px;
}
.match-panel {
  background: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
  &-info {
    .van-cell__title {
      font-size: 18px;
      font-weight: bold;
    }
    .van-cell__label {
      margin-top: 10px;
    }
    .van-cell__value {
      flex: none;
    }
    .match-rate {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      padding-left: 15px;
      position: relative;
      margin-left: 15px;
      &::before {
        content: '';
        width: 1px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: #f2f3f4;
        transform: scale(0.5, 1);
      }
      &-point {
        font-size: 18px;
        color: coral;
        font-weight: bold;
      }
    }
  }
}
.match-board {
  display: inline-flex;
  align-items: center;
  &-icon {
    background: #1f2322;
    color: #fff;
    border-radius: 3px 0 0 3px;
    padding: 2px 5px;
  }
  &-text {
    color: #333;
    background: #fedab7;
    border-radius: 3px;
    font-size: 12px;
    padding: 2px 5px;
  }
  &-icon + &-text {
    border-radius: 0 3px 3px 0;
  }
}

.van-cell-group__title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  padding: 15px 15px 15px 20px !important;
  position: relative;
  background-color: #fff;
  border-radius: 5px 5px 0 0;
  &::after {
    content: '';
    width: 3px;
    height: 1em;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -0.5em;
    background: #ff6600;
    border-radius: 3px;
  }
}
.matchitem-group {
  margin-bottom: 10px;
  &-cell {
    margin-bottom: 0;
    background-color: #fff;
    .van-cell__value {
      flex: none;
      text-align: center;
      padding-left: 15px;
    }
    .van-radio__icon {
      .van-icon {
        display: none !important;
      }
    }
    &__checked {
      background-color: rgba(245, 175, 80, 0.2) !important;
      .van-cell__title,
      .van-cell__label,
      .van-cell__value {
        color: #ff6600;
      }
    }
  }
  .match-enroll {
    text-align: center;
  }
}

.question-item {
  .van-cell__left-icon-wrap {
    color: red;
  }
}
</style>
